<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.d1{
				border : solid 1px grey;
				background-color : #baccd6; 
				padding : 20px;
			}
		
		
		</style>
		<script>
			function changeStyle(){
				let d1 = document.getElementById("d1");
				d1.style.border ="solid 1px grey" 
				d1.style.backgroundColor ="#baccd6" 
				d1.style.padding = "20px";
			}
		
		function changeClassName(){
			let d1 = document.getElementById("d1");
			d1.className = "d1 d2"; //覆盖原来的class，
		}
		</script>
	</head>
	<body>
		<button type="button"  onclick="changeStyle()">改变样式</button>
		<button type="button"  onclick="changeClassName()">改变样式mingcheng </button>
		
		<div class="d2 " id="d1" >
			content
		</div>
		
	</body>
</html>
